<template>
	<view>
		<canvas style="width: 750rpx; height: 750rpx;" canvas-id="myCanvas"></canvas>
		<image :src="distortedImage" mode="widthFix"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				distortedImage: ''
			}
		},
		methods: {
			fun() {
				const ctx = wx.createCanvasContext('myCanvas');

				wx.getImageInfo({
					src: 'https://dev-1313492473.cos.ap-guangzhou.myqcloud.com/userImage/ba43c88bb4f74e139a222903af9ff8bf.jpg',
					success(res) {
						const imgWidth = 329;
						const imgHeight = 428;

						// 将图片绘制到 Canvas 上
						ctx.drawImage(res.path, 25, 0, imgWidth, imgHeight);
						ctx.draw(false, () => {
							wx.canvasGetImageData({
								canvasId: 'myCanvas',
								x: 0,
								y: 0,
								width: imgWidth,
								height: imgHeight,
								success(res) {
									const imageData = res.data;
									// 对 imageData 进行扭曲处理
									const distortedImageData = distortImage(imageData, imgWidth,
										imgHeight);

									console.log(distortedImageData);
									// 将处理后的图像数据放回 Canvas
									wx.canvasPutImageData({
										canvasId: 'myCanvas',
										x: 25,
										y: 0,
										width: imgWidth,
										height: imgHeight,
										data: distortedImageData,
										success() {
											console.log('图片扭曲完成');

											setTimeout(() => {

												wx.canvasToTempFilePath({
													canvasId: 'myCanvas',
													success(res) {
														const
															tempFilePath =
															res
															.tempFilePath;

														// 将生成的图片显示在页面上
														this.distortedImage =
															tempFilePath
													}
												});
											}, 5000)
										}
									});
								}
							});
						});
					}
				});

				function getPixel(imageData, width, height, x, y) {
				  const x1 = Math.floor(x);
				  const y1 = Math.floor(y);
				  const x2 = x1 + 1;
				  const y2 = y1 + 1;
				
				  // 边界检查
				  if (x1 < 0 || y1 < 0 || x2 >= width || y2 >= height) {
				    return [0, 0, 0, 0]; // 返回透明像素
				  }
				
				  const index1 = (y1 * width + x1) * 4;
				  const index2 = (y1 * width + x2) * 4;
				  const index3 = (y2 * width + x1) * 4;
				  const index4 = (y2 * width + x2) * 4;
				
				  const dx = x - x1;
				  const dy = y - y1;
				
				  // 双线性插值
				  const r = (1 - dx) * (1 - dy) * imageData[index1] +
				            dx * (1 - dy) * imageData[index2] +
				            (1 - dx) * dy * imageData[index3] +
				            dx * dy * imageData[index4];
				
				  const g = (1 - dx) * (1 - dy) * imageData[index1 + 1] +
				            dx * (1 - dy) * imageData[index2 + 1] +
				            (1 - dx) * dy * imageData[index3 + 1] +
				            dx * dy * imageData[index4 + 1];
				
				  const b = (1 - dx) * (1 - dy) * imageData[index1 + 2] +
				            dx * (1 - dy) * imageData[index2 + 2] +
				            (1 - dx) * dy * imageData[index3 + 2] +
				            dx * dy * imageData[index4 + 2];
				
				  const a = (1 - dx) * (1 - dy) * imageData[index1 + 3] +
				            dx * (1 - dy) * imageData[index2 + 3] +
				            (1 - dx) * dy * imageData[index3 + 3] +
				            dx * dy * imageData[index4 + 3];
				
				  return [r, g, b, a];
				}
				
				function distortImage(imageData, width, height) {
				  const data = new Uint8ClampedArray(imageData.length);
				
				  for (let y = 0; y < height; y++) {
				    for (let x = 0; x < width; x++) {
				      const index = (y * width + x) * 4;
				
				      // 扭曲算法：例如，简单的波浪效果
				      const offset = Math.abs(Math.sin(y / 30) * 5); // 波浪效果
				      // const newX = x<214?x + offset:x - offset; // 允许浮点数
				      const newX = x - offset; // 允许浮点数
				      const newY = y;
				
				      // 使用插值方法获取像素值
				      const pixel = getPixel(imageData, width, height, newX, newY);
				
				      // 将插值后的像素写入新图像
				      data[index] = pixel[0];         // Red
				      data[index + 1] = pixel[1];     // Green
				      data[index + 2] = pixel[2];     // Blue
				      data[index + 3] = pixel[3];     // Alpha
				    }
				  }
				
				  return data;
				}
			}
		},
		onLoad() {
			this.fun()
		}
	}
</script>

<style>

</style>